<template>
  <div class="home-page">
    <common-header />
    
    <div class="main-content">
      <!-- 轮播图 -->
      <div class="banner">
        <el-carousel height="600px" :interval="5000" arrow="always" indicator-position="none">
          <el-carousel-item v-for="banner in banners" :key="banner.id">
            <div class="banner-slide" :style="{ backgroundImage: `url(${banner.image})` }">
              <div class="banner-overlay"></div>
              <div class="banner-content">
                <div class="banner-text" :class="banner.position || 'center'">
                  <h2 class="slide-in" :class="banner.titleAnimation">{{ banner.title }}</h2>
                  <p class="slide-in" :class="banner.descAnimation">{{ banner.description }}</p>
                  <el-button 
                    type="primary" 
                    size="large" 
                    class="banner-btn slide-in" 
                    :class="banner.btnAnimation"
                    @click="handleBannerClick(banner)"
                  >
                    {{ banner.buttonText }} <i class="el-icon-arrow-right"></i>
                  </el-button>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 公告通知 -->
      <div class="announcement-section">
        <div class="section-header reveal-up">
          <h2 class="fancy-title">最新动态</h2>
          <div class="title-underline"></div>
        </div>
        
        <div class="announcement-container">
          <!-- 左侧系统公告 -->
          <div class="notice-list">
            <div class="notice-header">
              <h3><i class="el-icon-bell"></i> 系统公告</h3>
              <router-link to="/news" class="view-more">
                查看更多 <i class="el-icon-arrow-right"></i>
              </router-link>
            </div>
            <div class="notice-items">
              <div v-for="notice in announcements" :key="notice.id" class="notice-item" @click="showNoticeDetail(notice)">
                <div class="notice-content">
                  <div class="notice-icon">
                    <i class="el-icon-message"></i>
                  </div>
                  <div class="notice-info">
                    <div class="notice-title">{{ notice.title }}</div>
                    <div class="notice-brief">{{ notice.content.length > 50 ? notice.content.substring(0, 50) + '...' : notice.content }}</div>
                    <div class="notice-meta">
                      <span><i class="el-icon-date"></i> {{ notice.time }}</span>
                      <el-tag size="mini" type="info">系统公告</el-tag>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧新闻资讯 -->
          <div class="news-list">
            <div class="news-header">
              <h3><i class="el-icon-news"></i> 新闻资讯</h3>
              <router-link to="/news" class="view-more">
                查看更多 <i class="el-icon-arrow-right"></i>
              </router-link>
            </div>
            <div class="news-grid">
              <div v-for="news in latestNews" :key="news.id" class="news-card" @click="showNewsDetail(news)">
                <div class="news-image">
                  <el-image :src="news.image" fit="cover">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <div class="news-date">
                    <span class="day">{{ formatDate(news.date, 'DD') }}</span>
                    <span class="month">{{ formatDate(news.date, 'MM') }}月</span>
                  </div>
                </div>
                <div class="news-content">
                  <h4>{{ news.title }}</h4>
                  <p>{{ news.summary }}</p>
                  <div class="news-footer">
                    <span class="read-more">阅读全文 <i class="el-icon-arrow-right"></i></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 快速预约区 -->
      <div class="quick-booking">
        <div class="section-header reveal-up">
          <h2 class="fancy-title">快速预约</h2>
          <div class="title-underline"></div>
          <p class="subtitle">选择您喜欢的自习室，立即预约</p>
        </div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item, index) in quickBookings" :key="item.id">
            <div class="quick-item reveal-up" :style="{ animationDelay: `${index * 0.2}s` }">
              <div class="item-icon pulse">
                <i :class="item.icon"></i>
              </div>
              <div class="item-info">
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 热门自习室 -->
      <div class="popular-rooms">
        <div class="section-header reveal-up">
          <h2 class="fancy-title">热门自习室</h2>
          <div class="title-underline"></div>
          <p class="subtitle">最受欢迎的学习空间</p>
        </div>
        <el-row :gutter="30">
          <el-col :span="8" v-for="room in popularRooms" :key="room.id">
            <div class="room-card">
              <div class="room-img">
                <el-image :src="room.image" fit="cover">
                  <div slot="placeholder" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
                <div class="room-status" :class="room.status">
                  {{ getStatusText(room.status) }}
                </div>
                <div class="room-actions">
                  <el-button type="primary" @click.stop="handleBook(room)">立即预约</el-button>
                  <el-button type="text" @click.stop="goToDetail(room.id)">查看详情</el-button>
                </div>
              </div>
              <div class="room-info">
                <h3>{{ room.name }}</h3>
                <p class="location"><i class="el-icon-location"></i> {{ room.location }}</p>
                <div class="room-features">
                  <span><i class="el-icon-user"></i> {{ room.capacity }}人</span>
                  <el-rate v-model="room.rating" disabled show-score text-color="#ff9900"/>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 使用统计 -->
      <div class="statistics">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(stat, index) in statistics" :key="index">
            <div class="stat-card">
              <div class="stat-icon">
                <i :class="stat.icon"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ stat.value }}</div>
                <div class="stat-label">{{ stat.label }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 页脚 -->
      <footer class="footer">
        <div class="footer-content">
          <div class="footer-section about">
            <div class="footer-logo">
              <span class="logo-text">YOYO</span>
              <span class="logo-icon"><i class="el-icon-reading"></i></span>
            </div>
            <p class="footer-slogan">悠悠般的沉浸式学习氛围</p>
            <p class="footer-desc">致力于为学生提供优质的学习环境，让每个人都能找到适合自己的学习空间。</p>
            <div class="contact-info">
              <p><i class="el-icon-location"></i> 重庆市巴南区红光大道</p>
              <p><i class="el-icon-phone"></i> 023-12345678</p>
              <p><i class="el-icon-message"></i> support@yoyo-study.com</p>
            </div>
          </div>
          
          <div class="footer-section links">
            <h3>快速链接</h3>
            <ul>
              <li><router-link to="/about">关于我们</router-link></li>
              <li><router-link to="/help">使用帮助</router-link></li>
              <li><router-link to="/terms">服务条款</router-link></li>
              <li><router-link to="/privacy">隐私政策</router-link></li>
            </ul>
          </div>
          
          <div class="footer-section features">
            <h3>特色服务</h3>
            <ul>
              <li><i class="el-icon-time"></i> 24小时开放</li>
              <li><i class="el-icon-cpu"></i> 智能预约系统</li>
              <li><i class="el-icon-video-camera"></i> 安全监控</li>
              <li><i class="el-icon-connection"></i> 免费 WiFi</li>
            </ul>
          </div>
          
          <div class="footer-section follow">
            <h3>关注我们</h3>
            <div class="qr-code">
              <el-image src="path/to/qr-code.png" fit="cover">
                <div slot="placeholder" class="qr-placeholder">
                  <i class="el-icon-mobile-phone"></i>
                </div>
              </el-image>
              <p>扫码关注公众号</p>
            </div>
            <div class="social-icons">
              <a href="#" class="social-icon"><i class="el-icon-s-platform"></i></a>
              <a href="#" class="social-icon"><i class="el-icon-s-custom"></i></a>
              <a href="#" class="social-icon"><i class="el-icon-s-promotion"></i></a>
            </div>
          </div>
        </div>
        
        <div class="footer-bottom">
          <div class="copyright">
            © 2024 YOYO自习室 All Rights Reserved
            <a href="https://beian.miit.gov.cn/" target="_blank" class="icp">渝ICP备xxxxxxxx号-1</a>
          </div>
        </div>
      </footer>
    </div>

    <!-- 公告详情对话框 -->
    <el-dialog
      :title="currentNotice.title"
      :visible.sync="noticeDialog.visible"
      width="600px"
    >
      <div class="notice-detail">
        <div class="notice-meta">
          <span><i class="el-icon-date"></i> {{ currentNotice.time }}</span>
          <span><i class="el-icon-user"></i> {{ currentNotice.author }}</span>
        </div>
        <div class="notice-content" v-html="currentNotice.content"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonHeader from '@/components/Header.vue'
import request from '@/utils/request'

export default {
  name: 'HomePage',
  components: {
    CommonHeader
  },
  data() {
    return {
      // 轮播图数据
      banners: [
        {
          id: 1,
          title: '优质自习环境',
          description: '为您提供安静舒适的学习空间，让每一次学习都充满效率',
          buttonText: '立即预约',
          image: 'https://images.unsplash.com/photo-1541339907198-e08756dedf3f',
          position: 'left',
          titleAnimation: 'from-left',
          descAnimation: 'from-left delay-1',
          btnAnimation: 'from-bottom delay-2'
        },
        {
          id: 2,
          title: '智能预约系统',
          description: '随时随地，轻松预约，让学习更加便捷',
          buttonText: '了解更多',
          image: 'https://images.unsplash.com/photo-1497633762265-9d179a990aa6',
          position: 'right',
          titleAnimation: 'from-right',
          descAnimation: 'from-right delay-1',
          btnAnimation: 'from-bottom delay-2'
        },
        {
          id: 3,
          title: '24小时开放',
          description: '全天候服务，满足您的学习需求',
          buttonText: '查看详情',
          image: 'https://images.unsplash.com/photo-1529007196863-d07650a3f0ea',
          position: 'center',
          titleAnimation: 'from-top',
          descAnimation: 'fade-in delay-1',
          btnAnimation: 'from-bottom delay-2'
        }
      ],
      // 公告数据
      announcements: [],
      // 新闻数据
      latestNews: [],
      // 快速预约选项
      quickBookings: [
        {
          id: 1,
          title: '普通自习室',
          description: '安静的个人学习空间',
          icon: 'el-icon-reading'
        },
        {
          id: 2,
          title: '研讨室',
          description: '小组讨论专用空间',
          icon: 'el-icon-office-building'
        },
        {
          id: 3,
          title: '电脑室',
          description: '配备电脑的学习室',
          icon: 'el-icon-monitor'
        },
        {
          id: 4,
          title: '休息室',
          description: '短暂休息放松空间',
          icon: 'el-icon-coffee-cup'
        }
      ],
      // 热门自习室
      popularRooms: [],
      // 统计数据
      statistics: [
        {
          icon: 'el-icon-user',
          value: '1000+',
          label: '日均使用人数'
        },
        {
          icon: 'el-icon-data-line',
          value: '98%',
          label: '用户满意度'
        },
        {
          icon: 'el-icon-office-building',
          value: '50+',
          label: '自习室数量'
        },
        {
          icon: 'el-icon-time',
          value: '24h',
          label: '全天候开放'
        }
      ],
      // 公告对话框
      noticeDialog: {
        visible: false
      },
      currentNotice: {
        title: '',
        time: '',
        author: '',
        content: ''
      },
      defaultRoomImage: '',
      baseUrl: 'http://127.0.0.1:8090',
    }
  },
  mounted() {
    // 添加滚动动画
    this.addScrollAnimation();
  },
  created() {
    this.getPopularRooms()
    this.getNotices() // 获取公告和新闻
  },
  methods: {
    handleBannerClick(banner) {
      if (banner.buttonText === '立即预约') {
        this.$router.push('/study-room')
      } else {
        this.$router.push('/about')
      }
    },
    handleQuickBook(item) {
      this.$router.push({
        path: '/study-room',
        query: { type: item.id }
      })
    },
    goToDetail(id) {
      this.$router.push(`/room/detail/${id}`)
    },
    showNoticeDetail(notice) {
      this.currentNotice = notice
      this.noticeDialog.visible = true
    },
    showNewsDetail(news) {
      // 暂时在当前页面显示新闻详情
      this.currentNotice = {
        title: news.title,
        time: news.date,
        author: '管理员',
        content: news.content
      }
      this.noticeDialog.visible = true
    },
    getStatusText(status) {
      const statusMap = {
        available: '空闲',
        booked: '已预约',
        maintenance: '维护中'
      }
      return statusMap[status] || status
    },
    handleBook(room) {
      if (room.status !== 'available') {
        this.$message.warning('该自习室当前不可预约')
        return
      }
      this.$router.push({
        path: '/study-room/booking',
        query: { id: room.id }
      })
    },
    addScrollAnimation() {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('reveal-up');
          }
        });
      }, {
        threshold: 0.1
      });

      document.querySelectorAll('.section-header, .quick-item, .room-card').forEach(el => {
        observer.observe(el);
      });
    },
    /** 获取热门自习室数据 */
    async getPopularRooms() {
      try {
        const res = await request({
          url: '/api/study/studyroom/top-rated',
          method: 'get'
        })
        if (res.code === 200) {
          this.popularRooms = res.data.map(room => ({
            id: room.roomId,
            name: room.roomName,
            status: this.getRoomStatus(room.roomStatus),
            rating: room.averageRating,
            capacity: room.totalSeats,
            location: room.location,
            image: room.img || this.defaultRoomImage
          }))
        }
      } catch (error) {
        console.error('获取热门自习室失败:', error)
      }
    },
    /** 获取房间状态 */
    getRoomStatus(status) {
      // 根据状��码返回对应的状态标识
      const statusMap = {
        0: 'maintenance', // 维护中
        1: 'available',   // 可用
        2: 'booked'       // 已预约
      }
      return statusMap[status] || 'maintenance'
    },
    /** 获取公告和新闻列表 */
    async getNotices() {
      try {
        // 获取公告
        const noticeRes = await request({
          url: '/api/admin/info/notice/list',
          method: 'get',
          params: {
            pageNum: 1,
            pageSize: 5,
            status: '1', // 只获取已发布的
            type: '1'  // 公告类型
          }
        })
        
        // 获取新闻
        const newsRes = await request({
          url: '/api/admin/info/notice/list',
          method: 'get',
          params: {
            pageNum: 1,
            pageSize: 4,
            status: '1', // 只获取已发布的
            type: '2'  // 新闻类型
          }
        })

        if (noticeRes.code === 200) {
          this.announcements = noticeRes.data.list.map(notice => ({
            id: notice.id,
            title: notice.title,
            category: '系统公告',
            type: 'info',
            time: this.formatDate(notice.createTime),
            content: notice.content,
            author: '管理员'
          }))
        }

        if (newsRes.code === 200) {
          this.latestNews = newsRes.data.list.map(news => ({
            id: news.id,
            title: news.title,
            summary: news.content.length > 50 ? news.content.substring(0, 50) + '...' : news.content,
            image: news.imgUrl ? `http://127.0.0.1:8090${news.imgUrl}` : 'https://via.placeholder.com/300x200',
            date: news.createTime,
            content: news.content,
            views: 0
          }))
        }
      } catch (error) {
        console.error('获取公告和新闻失败:', error)
      }
    },
    /** 格式化日期 */
    formatDate(dateStr, format) {
      const date = new Date(dateStr)
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      
      if (format === 'MM') {
        return month
      } else if (format === 'DD') {
        return day
      }
      return `${month}-${day}`
    }
  }
}
</script>

<style scoped>
/* 基础动画类 */
.slide-in {
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* 延迟类 */
.delay-1 {
  animation-delay: 0.5s;
}

.delay-2 {
  animation-delay: 1s;
}

/* 动画效果 */
.from-left {
  animation-name: slideInLeft;
}

.from-right {
  animation-name: slideInRight;
}

.from-top {
  animation-name: slideInTop;
}

.from-bottom {
  animation-name: slideInBottom;
}

.fade-in {
  animation-name: fadeIn;
}

/* 动画关键帧 */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInTop {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInBottom {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 其他样式保持不变 */

.home-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}



.banner {
  margin-top: 0;
}

.banner-slide {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.4) 0%,
    rgba(0,0,0,0.2) 20%,
    rgba(0,0,0,0.1) 100%
  );
}

.banner-content {
  position: relative;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;
  display: flex;
  align-items: center;
}

.banner-text {
  max-width: 600px;
  color: white;
  position: relative;
}

.banner-text.left {
  text-align: left;
}

.banner-text.right {
  margin-left: auto;
  text-align: right;
}

.banner-text.center {
  margin: 0 auto;
  text-align: center;
}

.banner-text h2 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.banner-text p {
  font-size: 20px;
  margin-bottom: 30px;
  line-height: 1.6;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.banner-btn {
  padding: 15px 35px;
  font-size: 18px;
  border-radius: 30px;
  transition: all 0.3s;
}

.banner-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(24,144,255,0.3);
}

.banner-btn i {
  margin-left: 8px;
  transition: transform 0.3s;
}

.banner-btn:hover i {
  transform: translateX(5px);
}

/* 轮播箭头样式 */
.el-carousel__arrow {
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0.3);
  border: 2px solid rgba(255,255,255,0.7);
  margin: 0 30px;
  transition: all 0.3s;
}

.el-carousel__arrow:hover {
  background: rgba(0,0,0,0.6);
  transform: scale(1.1);
}

.el-carousel__arrow i {
  font-size: 24px;
}

.section-title {
  text-align: center;
  margin: 60px 0 40px;
}

.section-title h2 {
  font-size: 32px;
  color: #303133;
  margin-bottom: 10px;
}

.section-title p {
  color: #909399;
  font-size: 16px;
}

.quick-booking {
  padding: 0 50px;
}

.quick-item {
  height: 120px;
  background: white;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.quick-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.quick-item i {
  font-size: 36px;
  color: #409EFF;
  margin-bottom: 10px;
}

.popular-rooms {
  padding: 0 50px;
}

.room-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  transition: all 0.3s;
  margin-bottom: 30px;
}

.room-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.room-img {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.room-img .el-image {
  width: 100%;
  height: 100%;
}

.room-status {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 12px;
  border-radius: 20px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  z-index: 1;
}

.room-status.available {
  background: #67C23A;
}

.room-status.maintenance {
  background: #E6A23C;
}

.room-status.booked {
  background: #F56C6C;
}

.room-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  display: flex;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s;
}

.room-card:hover .room-actions {
  opacity: 1;
  transform: translateY(0);
}

.room-info {
  padding: 20px;
}

.room-info h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #303133;
}

.location {
  color: #909399;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 12px;
}

.room-features {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #606266;
}

.room-features span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 30px;
}

.statistics {
  padding: 50px;
  background: white;
  margin: 60px 0;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
}

.stat-icon {
  font-size: 40px;
  color: #409EFF;
  margin-right: 20px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  color: #909399;
  margin-top: 5px;
}

.footer {
  background: linear-gradient(to bottom, #f8f9fa, #fff);
  color: #606266;
  padding: 80px 0 20px;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  padding: 0 20px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}

.footer-logo .logo-text {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(45deg, #409EFF, #67C23A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 2px;
}

.footer-slogan {
  font-size: 14px;
  color: #909399;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.footer-desc {
  line-height: 1.8;
  margin-bottom: 25px;
  color: #606266;
}

.footer-section h3 {
  font-size: 18px;
  color: #303133;
  margin-bottom: 25px;
  position: relative;
  display: inline-block;
}

.footer-section h3::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  border-radius: 2px;
  transition: width 0.3s;
}

.footer-section:hover h3::after {
  width: 100%;
}

.contact-info p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #606266;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-section ul li a,
.footer-section ul li {
  color: #606266;
  text-decoration: none;
  transition: all 0.3s;
}

.footer-section ul li:hover a,
.footer-section ul li:hover {
  color: #409EFF;
  transform: translateX(5px);
}

.qr-code {
  background: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  text-align: center;
  margin-bottom: 20px;
}

.qr-code .el-image {
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
}

.qr-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  font-size: 40px;
  color: #909399;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #606266;
  font-size: 20px;
  transition: all 0.3s;
  text-decoration: none;
}

.social-icon:hover {
  background: #409EFF;
  color: white;
  transform: translateY(-3px);
}

.footer-bottom {
  text-align: center;
  margin-top: 60px;
  padding-top: 20px;
  color: #909399;
  position: relative;
}

.footer-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
}

.icp {
  color: #909399;
  text-decoration: none;
  margin-left: 10px;
  transition: color 0.3s;
}

.icp:hover {
  color: #409EFF;
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.fancy-title {
  font-size: 36px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.title-underline {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  margin: 0 auto 20px;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.section-header:hover .title-underline {
  width: 100px;
}

.subtitle {
  font-size: 18px;
  color: #606266;
  margin-top: 10px;
  font-weight: 300;
  letter-spacing: 1px;
}

/* 动画效果 */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  animation: revealUp 0.8s ease forwards;
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 快速预约卡片样式 */
.quick-item {
  padding: 30px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.quick-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(64,158,255,0.1), rgba(103,194,58,0.1));
  opacity: 0;
  transition: opacity 0.4s;
}

.quick-item:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 30px rgba(0,0,0,0.1);
}

.quick-item:hover::before {
  opacity: 1;
}

.item-icon {
  margin-bottom: 20px;
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.item-info h3 {
  font-size: 20px;
  color: #303133;
  margin-bottom: 10px;
  font-weight: 600;
}

.item-info p {
  color: #606266;
  line-height: 1.6;
  font-size: 14px;
}

/* 查看更多按钮 */
.view-more {
  display: inline-flex;
  align-items: center;
  color: #409EFF;
  font-size: 16px;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.3s;
}

.view-more:hover {
  background: rgba(64,158,255,0.1);
}

.view-more i {
  margin-left: 5px;
  transition: transform 0.3s;
}

.view-more:hover i {
  transform: translateX(5px);
}

/* 新闻卡片悬浮效果 */
.news-item {
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #409EFF;
  transition: all 0.4s;
  transform: translateX(-50%);
}

.news-item:hover::after {
  width: 100%;
}

.news-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* 统计数字动画 */
.stat-value {
  background: linear-gradient(45deg, #409EFF, #67C23A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 32px;
  font-weight: 700;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .fancy-title {
    font-size: 28px;
  }
  
  .subtitle {
    font-size: 16px;
  }
  
  .quick-item {
    margin-bottom: 20px;
  }
}

.announcement-section {
  padding: 60px 0;
  background: linear-gradient(to bottom, #fff, #f8f9fa);
  position: relative;
  overflow: hidden;
}

.announcement-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
}

.announcement-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
}

.notice-list, .news-list {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: transform 0.3s;
}

.notice-list:hover, .news-list:hover {
  transform: translateY(-5px);
}

.notice-header, .news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(45deg, #409EFF, #67C23A);
  color: white;
}

.notice-header h3, .news-header h3 {
  font-size: 18px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-more {
  color: white;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.9;
  transition: all 0.3s;
}

.view-more:hover {
  opacity: 1;
  transform: translateX(5px);
}

.notice-items {
  padding: 20px;
}

.notice-item {
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 15px;
  background: #f8f9fa;
}

.notice-item:last-child {
  margin-bottom: 0;
}

.notice-item:hover {
  background: #f0f2f5;
  transform: translateX(5px);
}

.notice-content {
  display: flex;
  gap: 15px;
}

.notice-icon {
  width: 40px;
  height: 40px;
  background: #409EFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.notice-info {
  flex: 1;
}

.notice-title {
  font-size: 16px;
  color: #303133;
  margin-bottom: 8px;
  font-weight: 500;
}

.notice-brief {
  color: #606266;
  font-size: 14px;
  margin-bottom: 8px;
  line-height: 1.5;
}

.notice-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #909399;
  font-size: 12px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
}

.news-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.3s;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.news-image {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.news-image .el-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s;
}

.news-card:hover .news-image .el-image {
  transform: scale(1.05);
}

.news-date {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  text-align: center;
}

.news-date .day {
  font-size: 20px;
  font-weight: bold;
  display: block;
}

.news-date .month {
  font-size: 12px;
}

.news-content {
  padding: 15px;
}

.news-content h4 {
  font-size: 16px;
  color: #303133;
  margin: 0 0 10px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-content p {
  color: #606266;
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
}

.read-more {
  color: #409EFF;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s;
}

.news-card:hover .read-more {
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .announcement-container {
    grid-template-columns: 1fr;
  }
  
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* 公告详情对话框样式 */
.notice-detail {
  padding: 20px;
}

.notice-meta {
  display: flex;
  gap: 20px;
  color: #909399;
  margin-bottom: 20px;
  font-size: 14px;
}

.notice-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.notice-content {
  line-height: 1.8;
  color: #303133;
}

/* 区块标题样式 */
.section-header {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  padding-bottom: 20px;
}

.section-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(64,158,255,0.2), rgba(64,158,255,0.5), rgba(103,194,58,0.5), rgba(103,194,58,0.2), transparent);
}

.fancy-title {
  font-size: 36px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.fancy-title::before,
.fancy-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  opacity: 0.3;
}

.fancy-title::before {
  right: calc(100% + 20px);
}

.fancy-title::after {
  left: calc(100% + 20px);
}

.title-underline {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  margin: 15px auto 20px;
  border-radius: 2px;
  position: relative;
}

.title-underline::before,
.title-underline::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #409EFF;
}

.title-underline::before {
  left: -10px;
}

.title-underline::after {
  right: -10px;
  background: #67C23A;
}

.subtitle {
  font-size: 16px;
  color: #606266;
  margin-top: 10px;
  font-weight: 300;
  letter-spacing: 1px;
}

/* 区块分割线 */
.announcement-section,
.quick-booking,
.popular-rooms,
.statistics {
  position: relative;
  padding: 60px 0;
}

.announcement-section::before,
.quick-booking::before,
.popular-rooms::before,
.statistics::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(64,158,255,0.2), rgba(64,158,255,0.5), rgba(103,194,58,0.5), rgba(103,194,58,0.2), transparent);
}

.announcement-section::after,
.quick-booking::after,
.popular-rooms::after,
.statistics::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(64,158,255,0.2), rgba(64,158,255,0.5), rgba(103,194,58,0.5), rgba(103,194,58,0.2), transparent);
}

/* 区块内容容器 */
.announcement-container,
.quick-booking .el-row,
.popular-rooms .el-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .fancy-title {
    font-size: 28px;
  }
  
  .fancy-title::before,
  .fancy-title::after {
    width: 30px;
  }
  
  .subtitle {
    font-size: 14px;
  }
}

</style> 